<template lang="pug">
div.app-body
  .app-menu(:class="{'tiny':!sidebar.opened}")
    SideBar
  .app-frame
    .app-header
      Hamburger(:toggle-click="toggleSideBar" :is-active="sidebar.opened")
      Breadcrumb.hamburger-container
      el-dropdown.avatar-container(trigger='click')
        .avatar-wrapper
          span 个人空间
          i.el-icon-caret-bottom.
        el-dropdown-menu.user-dropdown(slot='dropdown')
          // el-dropdown-item(divided)
          el-dropdown-item
            span(@click='logoutBtn()' style='display:block;') 退出登录
    .app-main-body
      router-view
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import Hamburger from "../../components/Hamburger.vue";
import { AppModule } from "../../store/modules/app";
import { UserModule } from "../../store/modules/user";
import Breadcrumb from "../../components/Breadcrumb.vue";
import SideBar from "./components/Sidebar.vue";

@Component({
  components: {
    Hamburger,
    Breadcrumb,
    SideBar
  }
})
export default class Home extends Vue {
  get sidebar() {
    return AppModule.sidebar;
  }

  private toggleSideBar() {
    AppModule.ToggleSideBar(false);
  }

  private logoutBtn() {
    UserModule.logout().then(() => {
      this.$router.push("/login");
    });
  }
}
</script>

<style lang="scss" scoped>
@import "../../../sass/variables";

.app {
  &-body {
    display: flex;
    height: 100%;
    align-items: stretch;
    overflow: hidden;
  }

  &-menu {
    background: $app-menu-bg;
    width: 172px;
    flex: 0 0 1;
    transition: 0.5s;

    &.tiny {
      width: 40px;
    }
  }

  &-frame {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  &-header {
    height: 50px;
    background-color: $app-header-bg;
    line-height: 50px;
    flex: 0 0 1;
    padding: 0 16px;
    overflow: hidden;

    .avatar-container {
      height: 50px;
      display: inline-block;
      position: absolute;
      right: 35px;
      top: 0px;
    }
  }

  &-main-body {
    background-color: $body-bg;
    flex: 1 1 0;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
</style>
